<template>
  <div>
    <div class="mybox">
      <div class="my">
        <div class="myinfo">
          <img
            src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
            alt=""
          />
          <div class="user">
            <p>用户</p>
          </div>
        </div>
        <div class="iconlist">
          <div class="icon-item">我的订单</div>
          <div class="icon-item">优惠卷</div>
          <div class="icon-item">我的足迹</div>
          <div class="icon-item" @click="goCollection">我的收藏</div>
          <div class="icon-item" @click="changeAdd">地址管理</div>
          <div class="icon-item">联系客服</div>
          <div class="icon-item">帮助中心</div>
          <div class="icon-item" @click="goFeedback">意见反馈</div>
        </div>
      </div>
    </div>

    <tab></tab>
  </div>
</template>

<script>
import tab from "../all/rt.vue";

export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    goFeedback() {
      this.$router.push("/my/feedback");
    },
    changeAdd() {
      this.$router.push("my/address");
    },
    goCollection() {
      this.$router.push("my/collection");
    },
  },
  components: {
    tab: tab,
  },
};
</script>

<style lang="scss" scoped>
.mybox {
  overflow: auto;
  margin-top: 0;
  .myinfo {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    background: #333;
    padding: 15px;
    box-sizing: border-box;
    img {
      width: 74px;
      height: 74px;
      border-radius: 50%;
    }
    .user {
      margin-left: 15px;
      p {
        color: #fff;
      }
    }
  }
}
.iconlist {
  display: flex;
  align-items: center;
  background: #fff;
  flex-wrap: wrap;
  .icon-item {
    width: 33.33%;
    padding: 25px 0;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom:  1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
}
</style>
